All files / src/routes/workout/[id]/_components WorkoutShell.svelte

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script lang="ts">
	// Shell metadata block — rendered in both scheduled and ready/later states.
 
	interface Location {
		id: string;
		name: string;
	}
 
	interface WorkoutShellProps {
		scheduled_date: string;
		session_type: string;
		time_cap_minutes: number;
		is_deload: boolean;
		location: Location | null;
	}
 
	let { scheduled_date, session_type, time_cap_minutes, is_deload, location }: WorkoutShellProps =
		$props();
</script>
 
<dl class="workout-shell">
	<div class="workout-shell__item">
		<dt class="workout-shell__label">Date</dt>
		<dd class="workout-shell__value">
			<time datetime={scheduled_date} data-testid="workout-detail-meta-date">
				{scheduled_date}
			</time>
		</dd>
	</div>
 
	<div class="workout-shell__item">
		<dt class="workout-shell__label">Session type</dt>
		<dd
			class="workout-shell__value"
			data-testid="workout-detail-meta-session-type"
		>
			{session_type}
		</dd>
	</div>
 
	<div class="workout-shell__item">
		<dt class="workout-shell__label">Time cap</dt>
		<dd class="workout-shell__value" data-testid="workout-detail-meta-time-cap">
			{time_cap_minutes} min
		</dd>
	</div>
 
	<div class="workout-shell__item">
		<dt class="workout-shell__label">Location</dt>
		<dd class="workout-shell__value" data-testid="workout-detail-meta-location">
			{location?.name ?? '—'}
		</dd>
	</div>
 
	{#if Iis_deload}
		<div class="workout-shell__item">
			<dt class="workout-shell__label">Deload</dt>
			<dd class="workout-shell__value" data-testid="workout-detail-meta-deload">
				<span class="workout-shell__badge">Deload week</span>
			</dd>
		</div>
	{/if}
</dl>
 
<style>
	.workout-shell {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: var(--space-4);
		margin: 0;
	}
 
	.workout-shell__item {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
	}
 
	.workout-shell__label {
		font-size: 12px;
		font-weight: 600;
		color: var(--ink-soft);
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}
 
	.workout-shell__value {
		font-size: 15px;
		font-weight: 500;
		color: var(--ink);
	}
 
	.workout-shell__badge {
		display: inline-block;
		padding: 2px 8px;
		border-radius: var(--radius-sm);
		background: var(--primary-soft);
		color: var(--on-primary-soft);
		font-size: 12px;
		font-weight: 600;
	}
</style>